/**
 * Body styles. This makes the toolstrip layout fit in with the Windows
 * bookmarkbar. Note that the background is provided separately, by
 * RenderWidget.
 */
body {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-box-align:left;
  white-space:nowrap;
  overflow: hidden;
  margin: 0;
  padding:0;
  font: menu;
  color: black;
  -webkit-user-select:none;
  cursor:default;
}

/**
 * This, combined with -webkit-box-align:center on body, makes content inside
 * the body tag center itself vertically by default.
 */
body>* {
  display:-webkit-box;
}

/**
 * Set display property of <script> and <style> as none explicitly to avoid
 * inheriting from <body>.
 */
body>script,
body>style {
 display:none;
}

/**
 * Toolstrip Buttons. The following styles make
 * <div class="toolstrip-button"><img><span>Woot</span></div> look like the
 * bookmarkbar buttons on Windows.
 *
 * TODO(aa): We may have to come up with a way to modify these slightly on
 * different platforms.
 *
 * TODO(aa): It would be nice if we could use actual <button> tags work here,
 * which should work once https://bugs.webkit.org/show_bug.cgi?id=25406 is
 * fixed.
 */
div.toolstrip-button {
  -webkit-box-orient:horizontal;
  -webkit-box-align:center;
  -webkit-box-sizing:border-box;
  border:7px solid transparent;
  font:menu;
  /*text-shadow: -0.05em 0 black, 0 0.05em black, 0.05em 0 black, 0 -0.05em black;*/
  background:transparent;
  line-height:100%;
  height:100%;
  padding:0;
}

div.toolstrip-button>img {
  display:-webkit-box;
  width:16px;
  height:16px;
  /**
   * We inset the image slightly, so that the button can be shorter
   * than would otherwise be possibe with our fat borders. The 5px right border
   * just creates the spacing between the icon and the text.
   */
  margin:-2px 5px -2px -1px;
}

div.toolstrip-button>span {
  display:-webkit-box;
  margin-right:1px;
  /**
   * Hack: WebKit appears to measure text height slightly differently than we do
   * in native code, making us not line up when centering, so we shift ourselves
   * up one pixel to match.
   */
  margin-top:-1px;
}

/**
 * NOTE: These images were created by pasting src/app/resources/textbutton_*
 * into a 15px square 9 grid. If they look funky, check to see if they match
 * the bookmark buttons. If they don't, they probably need to be regenerated.
 *
 * TODO(aa): It would be neat-o if these were generated magically from the
 * underlying images. Since the dimensions of the images are arbitrary, though,
 * it would be tricky.
 */
div.toolstrip-button:hover {
  border-width:7px;
  -webkit-border-image:url() 7 round round;
}

div.toolstrip-button:active {
  border-width:7px;
  -webkit-border-image:url() 7 round round;
}

div.separator{
  border-top: 1px solid #dddddd;
  height: 0px;
  margin: 3px 2px;
}

div.separator-empty{
  height: 0px;
  margin: 3px 2px;
}

input[type=search]{
  font: menu;
}

div#tabFilterInput > input, label {
vertical-align: middle;
}